<!--
 * @Description: 第九章 认识computed计算属性 实战案例购物车
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-12 10:13:26
-->
<template>
  <div>
    <p>认识computed计算属性</p>
    <div>
      <p>实战案例 购物车</p>
      <div>
        <p>未使用计算属性</p>
        <div>
          <div style="margin-top: 20px">
            <table border width="600" cellpadding="5" cellspacing="0">
              <thead>
                <tr>
                  <th>品名</th>
                  <th>单价</th>
                  <th>数量</th>
                  <th>总价</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in data1">
                  <td align="center" :key="item.id">{{ item.name }}</td>
                  <td align="right" :key="item.id">¥ {{ item.price }}</td>
                  <td align="center" :key="item.id">
                    <button @click="item.num > 1 ? (item.num--, total()) : null">-</button>
                    {{ item.num }}
                    <button @click="item.num < 10 ? (item.num++, total()) : null">+</button>
                  </td>
                  <td align="right" :key="item.id">¥ {{ item.num * item.price }}</td>
                  <td align="center" :key="item.id">
                    <button @click="del1(index)">删除</button>
                  </td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="4" align="right">总价：</td>
                  <td>{{ $total1 }}</td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
      <hr />
      <div>
        <p>使用计算属性</p>
        <div>
          <div style="margin-top: 20px">
            <table border width="600" cellpadding="5" cellspacing="0">
              <thead>
                <tr>
                  <th>品名</th>
                  <th>单价</th>
                  <th>数量</th>
                  <th>总价</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in data2">
                  <td align="center" :key="item.id">{{ item.name }}</td>
                  <td align="right" :key="item.id">¥ {{ item.price }}</td>
                  <td align="center" :key="item.id">
                    <button @click="item.num > 1 ? item.num-- : null">-</button>
                    {{ item.num }}
                    <button @click="item.num < 10 ? item.num++ : null">+</button>
                  </td>
                  <td align="right" :key="item.id">¥ {{ item.num * item.price }}</td>
                  <td align="center" :key="item.id">
                    <button @click="del2(index)">删除</button>
                  </td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="4" align="right">总价：</td>
                  <td>{{ total2 }}</td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
      <hr />
      <div>
        <p>使用计算属性进行搜索</p>
        <div>
          <input v-model="keyword" placeholder="搜索" type="text" />
        </div>
        <div>
          <div style="margin-top: 20px">
            <table border width="600" cellpadding="5" cellspacing="0">
              <thead>
                <tr>
                  <th>品名</th>
                  <th>单价</th>
                  <th>数量</th>
                  <th>总价</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in searchData">
                  <td align="center" :key="item.id">{{ item.name }}</td>
                  <td align="right" :key="item.id">¥ {{ item.price }}</td>
                  <td align="center" :key="item.id">
                    <button @click="item.num > 1 ? item.num-- : null">-</button>
                    {{ item.num }}
                    <button @click="item.num < 10 ? item.num++ : null">+</button>
                  </td>
                  <td align="right" :key="item.id">¥ {{ item.num * item.price }}</td>
                  <td align="center" :key="item.id">
                    <button @click="delSearchData(item.id)">删除</button>
                  </td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="4" align="right">总价：</td>
                  <td>{{ searchDataTotal }}</td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed } from 'vue'

interface Data {
  id: number
  name: string
  price: number
  num: number
}

let data1 = reactive<Data[]>([
  {
    id: 1,
    name: '衣服',
    price: 100,
    num: 1,
  },
  {
    id: 2,
    name: '帽子',
    price: 30,
    num: 2,
  },
  {
    id: 3,
    name: '牛仔裤',
    price: 138,
    num: 3,
  },
  {
    id: 4,
    name: '袜子',
    price: 10,
    num: 4,
  },
])

let $total1 = ref<number>(0)

const total = () => {
  $total1.value = data1.reduce((prev: number, next: Data) => {
    return prev + next.num * next.price
  }, 0)
}
total()

const del1 = (index: number) => {
  data1.splice(index, 1)
  total()
}

let data2 = reactive<Data[]>([
  {
    id: 1,
    name: '衣服',
    price: 100,
    num: 1,
  },
  {
    id: 2,
    name: '帽子',
    price: 30,
    num: 2,
  },
  {
    id: 3,
    name: '牛仔裤',
    price: 138,
    num: 3,
  },
  {
    id: 4,
    name: '袜子',
    price: 10,
    num: 4,
  },
])

const total2 = computed(() => {
  return data2.reduce((prev: number, next: Data) => {
    return prev + next.num * next.price
  }, 0)
})

const del2 = (index: number) => {
  data2.splice(index, 1)
}

let searchDataOrigin = reactive<Data[]>([
  {
    id: 1,
    name: '衣服',
    price: 100,
    num: 1,
  },
  {
    id: 2,
    name: '帽子',
    price: 30,
    num: 2,
  },
  {
    id: 3,
    name: '牛仔裤',
    price: 138,
    num: 3,
  },
  {
    id: 4,
    name: '袜子',
    price: 10,
    num: 4,
  },
])

let keyword = ref<string>('')
const searchData = computed(() => {
  return searchDataOrigin.filter((item: Data) => {
    return item.name.includes(keyword.value)
  })
})

const searchDataTotal = computed(() => {
  return searchData.value.reduce((prev: number, next: Data) => {
    return prev + next.num * next.price
  }, 0)
})

const delSearchData = (id: number) => {
  let _idx = searchDataOrigin.findIndex((item: Data) => {
    return item.id === id
  })

  searchDataOrigin.splice(_idx, 1)
}
</script>
<style scoped>
hr {
  margin: 10px 0;
}
</style>
